<template>
    <div>
        <quill-editor v-model="content"
                     :id="id"
                     ref="myTextEditor"
                     :options="editorOption"
                     @change="onChange"
        >
            <div id="toolbar" slot="toolbar"  :style="toolbarStyle">

                <!-- <span class="ql-formats"><button type="button" @click="htmlClick()"><i class="fa fa-file-o"></i></button></span> -->
                <span class="ql-formats"><button type="button" class="ql-bold" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-italic" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-underline" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-strike" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-blockquote" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-code-block" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-header" value="1" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-header" value="2" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-list" value="ordered" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-list" value="bullet" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-script" value="sub" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-script" value="super" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-indent" value="-1" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"><button type="button" class="ql-indent" value="+1" :disabled="HtmlStatus"></button></span>
                <span class="ql-formats"> <button type="button" class="ql-direction" value="rtl" :disabled="HtmlStatus"></button></span>

      <span class="ql-formats"><select class="ql-size" :disabled="HtmlStatus">
        <option value="small"></option>
        <option selected></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select></span>
      <span class="ql-formats"><select class="ql-header" :disabled="HtmlStatus">
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option selected="selected"></option>
      </select></span>
      <span class="ql-formats"><select class="ql-color" :disabled="HtmlStatus">
        <option selected="selected"></option>
        <option value="#e60000"></option>
        <option value="#ff9900"></option>
        <option value="#ffff00"></option>
        <option value="#008a00"></option>
        <option value="#0066cc"></option>
        <option value="#9933ff"></option>
        <option value="#ffffff"></option>
        <option value="#facccc"></option>
        <option value="#ffebcc"></option>
        <option value="#ffffcc"></option>
        <option value="#cce8cc"></option>
        <option value="#cce0f5"></option>
        <option value="#ebd6ff"></option>
        <option value="#bbbbbb"></option>
        <option value="#f06666"></option>
        <option value="#ffc266"></option>
        <option value="#ffff66"></option>
        <option value="#66b966"></option>
        <option value="#66a3e0"></option>
        <option value="#c285ff"></option>
        <option value="#888888"></option>
        <option value="#a10000"></option>
        <option value="#b26b00"></option>
        <option value="#b2b200"></option>
        <option value="#006100"></option>
        <option value="#0047b2"></option>
        <option value="#6b24b2"></option>
        <option value="#444444"></option>
        <option value="#5c0000"></option>
        <option value="#663d00"></option>
        <option value="#666600"></option>
        <option value="#003700"></option>
        <option value="#002966"></option>
        <option value="#3d1466"></option>
      </select></span>
     <span class="ql-formats"> <select class="ql-background" :disabled="HtmlStatus">
        <option value="#000000"></option>
        <option value="#e60000"></option>
        <option value="#ff9900"></option>
        <option value="#ffff00"></option>
        <option value="#008a00"></option>
        <option value="#0066cc"></option>
        <option value="#9933ff"></option>
        <option selected="selected"></option>
        <option value="#facccc"></option>
        <option value="#ffebcc"></option>
        <option value="#ffffcc"></option>
        <option value="#cce8cc"></option>
        <option value="#cce0f5"></option>
        <option value="#ebd6ff"></option>
        <option value="#bbbbbb"></option>
        <option value="#f06666"></option>
        <option value="#ffc266"></option>
        <option value="#ffff66"></option>
        <option value="#66b966"></option>
        <option value="#66a3e0"></option>
        <option value="#c285ff"></option>
        <option value="#888888"></option>
        <option value="#a10000"></option>
        <option value="#b26b00"></option>
        <option value="#b2b200"></option>
        <option value="#006100"></option>
        <option value="#0047b2"></option>
        <option value="#6b24b2"></option>
        <option value="#444444"></option>
        <option value="#5c0000"></option>
        <option value="#663d00"></option>
        <option value="#666600"></option>
        <option value="#003700"></option>
        <option value="#002966"></option>
        <option value="#3d1466"></option>
      </select></span>
      <span class="ql-formats"><select class="ql-font" :disabled="HtmlStatus">
        <option selected="selected"></option>
        <option value="serif"></option>
        <option value="monospace"></option>
      </select></span>
      <span class="ql-formats">
        <select class="ql-align" :disabled="HtmlStatus">
        <option selected="selected"></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      </span>
      <span class="ql-formats">
          <button type="button" class="ql-clean" :disabled="HtmlStatus"></button>
      </span>
      <span class="ql-formats">
          <button type="button" class="ql-link" :disabled="HtmlStatus"></button>
      </span>
      <span class="ql-formats">
          <button type="button" @click="imgClick" :disabled="HtmlStatus">
            <svg viewBox="0 0 18 18">
                <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
                <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
                <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
            </svg>
          </button>
      </span>
       <!-- <span class="ql-formats">
           <button type="button" class="ql-video"></button>
       </span> -->
     </div>
        </quill-editor>
        <crop-upload
                   v-model="showCrop"
                   :width="width"
                   :height="height"
                   :fileName="fileName"
                   uploadUrl="https://uat-lm.libertymutual.com.cn/cxb/nol/uploadWeb/single"
                   @uploadSuccess="onUploadSuccess"
                   ></crop-upload>
    </div>
</template>
<script>
    import axios from 'axios';
    import {quillEditor} from 'vue-quill-editor'
    import CropUpload from './CropUpload';
    import lrz from '../assets/js/lrz.bundle.js'
    import {base} from '../api/api';

    export default {
        props: {
            /*编辑器的内容*/
            value: {
                type: String
            },
            /*上传图片的地址*/
            uploadUrl: {
                type: String
            },
            /*上传图片的file控件name*/
            fileName: {
                type: String
            },
            /*图片大小*/
            maxSize:{
                type:Number,
                default:400//kb
            },
            /*使用使用裁切*/
            canCrop:{
                type:Boolean,
                default:false
            },
            /*裁切的最小尺寸*/
            width:{
                type:Number,
                default:600
            },
           /*裁切的最小尺寸*/
            height:{
                type:Number,
                default:600
            }
        },
        data() {
            return {
                status:false,
                content: '',
                id:'',
                editorOption: {
                    modules: {
                        toolbar: '#toolbar'
                    }
                },
              /*显示裁切控件*/
                showCrop:false,
                HtmlStatus:false,
                toolbarStyle:{}
            }
        },
        methods: {
            htmlClick(){
              // this.status = !this.status;
              // if(this.status){
              //   this.toolbarStyle = {
              //     'background-color':'#ccc'
              //   };
              //   this.HtmlStatus = true;

              // }
              // else{
              //   this.toolbarStyle = {
              //     'background-color':'transparent'
              //   };
              //   this.HtmlStatus = false;
              // }

            },
            onChange(){
                this.$emit('input', this.content)
            },
            /*选择上传图片切换*/
            onFileChange(e){
              let _this = this;
              console.log('111');
              console.log(e);
                var fileInput = e.target;
                console.log(fileInput);
                if (fileInput.files.length == 0) {
                    return;
                }
                if (fileInput.files[0].size > 1024 * 1024 * this.maxSize) {
                    alert('图片过大');
                    return;
                }
              if (!this.uploadUrl) {
                console.log('no editor uploadUrl');
                return;
              }
              var self = this;
              var temp;
              console.log(_this);

              console.log(fileInput.files);
              lrz(fileInput.files[0], {
                width: 400
              }).then(function (rst) {
                  temp = rst.base64.split(",")[1].toString();
                  console.log(self);
                  self.uploadW(temp);
                  // this.editor.focus();
              });
              // axios.post(this.uploadUrl,data).then(function(res){
              // console.log(res);
              //     if(res.data) {
              //       self.editor.insertEmbed(self.editor.getSelection().index, 'image', "https://uat-lm.libertymutual.com.cn"+res.data)
              //     }
              // });
            },
            uploadW : function(datas){
              var data = new FormData();
                  data.append('file',datas);
                  data.append('parampath',this.$store.state.editorPicture);
                var _this = this;
                _this.editor.focus();
                axios.post(_this.uploadUrl,data).then(function(res){
                     console.log(res);
                      if(res.data) {
                        _this.editor.insertEmbed(_this.editor.getSelection().index, 'image', base+res.data)
                      }
                });
            },
            /*裁切上传成功 res根据上传接口值获取*/
            onUploadSuccess:function (res) {
              console.log('success');
              this.editor.focus();
              this.editor.insertEmbed(this.editor.getSelection().index, 'image', res.url);
            },
            /*点击上传图片按钮*/
            imgClick() {
                if(this.canCrop){
                    this.showCrop=true;
                }else{
                  /*创建input file 不裁切，自己控制*/
                  var input = document.createElement('input');
                  input.type = 'file';
                  input.name = this.fileName;
                  input.accept = 'image/jpeg,image/png,image/jpg,image/gif';
                  input.onchange = this.onFileChange;
                  input.click();
                }
            },
        },
        computed: {
            editor() {
                return this.$refs.myTextEditor.quill;
            }
        },
        components: {
            quillEditor,
            CropUpload
        },
        mounted(){
            this.content = this.value;
        },
        watch: {
            'value'(newVal, oldVal) {
                if (this.editor) {
                    if (newVal !== this.content) {
                        this.content = newVal
                    }
                }
            },
        }
    }
</script>
<style type="text/css">
  .ql-container{
/*  min-height: 300px !important;*/
  max-height: 350px !important;
  overflow-y: scroll;
}
</style>